<!--
 * @Author: 刘苗
 * @Description: 
 * @Date: 2021-09-04 16:09:38
-->
<template>
  <div class="many">
    <div class="login_container">
      <el-form label-width="80px">
        <el-form-item label="登录名1111：">
          <el-input v-model="account" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="房间号：">
          <el-input v-model="roomid"  placeholder="请输入房间号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="join">加入房间</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      roomid: "",
      account: "",
    };
  },
  methods: {
    join() {
      if (this.account && this.roomid) {
        this.$router.push({
          name: "room",
          params: { roomid: this.roomid, account: this.account },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.many {
  position: relative;
  height: 100%;
  background: url("../../assets/bg.png");
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  .login_container {
    width: 400px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
    background: rgba(70, 68, 68, 0.473);
    position: relative;
    top: 20%;
  }
}
.center {
  width: 500px;
  height: 400px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
</style>
